<template>
  <div>
    <div class="right">
      <a href="javascript:void (0)" v-routers="{path:'/'}"></a>
    </div>
    <div class="card">
      <el-input style="width: 260px;margin-right: 10px" placeholder="请输入用户名称"></el-input>
      <el-select style="width: 260px;margin-right: 10px" v-model="value" placeholder="请选择课程名称">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button class="defaultBtn" icon="el-icon-search" color="#333" type="info">查询</el-button>
      <el-button class="defaultBtn" icon="el-icon-refresh-right"  type="info">重置</el-button>
    </div>


    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="课程名称" min-width="180"></el-table-column>
      <el-table-column prop="class" label="班级名称" min-width="180"></el-table-column>
      <el-table-column prop="major" label="专业名称" min-width="180"></el-table-column>
      <el-table-column prop="major" label="上课人数" min-width="180">
        <template #default="{row}">{{row.count}} / {{row.total}}</template>
      </el-table-column>
      <el-table-column prop="crateTime" label="课程时间" min-width="180"></el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="180">
        <el-button size="mini" @click="dialogVisible=true" class="defaultBtn" type="info">考勤记录</el-button>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
    </div>

    <el-dialog title="学生评分" :visible.sync="dialogVisible" width="1200px" :before-close="handleClose">
      <el-table :data="student" border style="width: 100%">
        <el-table-column prop="username" label="学生姓名" min-width="180"></el-table-column>
        <el-table-column prop="lesson" label="课程名称" min-width="180"></el-table-column>
        <el-table-column prop="major" label="专业名称" min-width="180"></el-table-column>
        <el-table-column label="签到" min-width="180">
          <template #default="{row}">
            <span :style="{color:row.type ===0 ? '#f53015':'#00790E'}">  {{type(row)}}</span>

          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="info" class="defaultBtn" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible:false,
      tableData: [{name:'计算机二班',class:'计算机科学与网络3班',count:50,total:74,major:'计算机科学与网络',type:0,crateTime:'2022-12-31 12:00:00'}],
      student:[
        {username:'张三丰',type:1,lesson:'计算机网络',major:'计算机网络基础',count:100},
        {username:'张三丰',type:0,lesson:'计算机网络',major:'计算机网络基础',count:90},
        {username:'张三丰',type:0,lesson:'计算机网络',major:'计算机网络基础',count:60},
        {username:'张三丰',type:0,lesson:'计算机网络',major:'计算机网络基础',count:10},
        {username:'张三丰',type:1,lesson:'计算机网络',major:'计算机网络基础',count:12},
        {username:'张三丰',type:1,lesson:'计算机网络',major:'计算机网络基础',count:12},
        {username:'张三丰',type:0,lesson:'计算机网络',major:'计算机网络基础',count:24},
        {username:'张三丰',type:1,lesson:'计算机网络',major:'计算机网络基础',count:55},
      ],
      options: [
        {value:0,label: '计算机科学与网络'},
        {value: 1, label: '高等数学'},
        {value: 2, label: '线性代数'},
        {value: 3, label: '计算机基础'},
        {value: 4, label: '计算机网络安全'}],
      value: '',
    }
  },
  methods:{
    type(item){
      console.log(item)
      switch (item.type){
        case 0:{
          return '未签到'
        }
        case 1:{
          return  '已签到'
        }
      }
    },
    handleClose(){
          this.dialogVisible=false
    }
  }
}
</script>

<style scoped lang="scss">

.card{
  width: 100%;
  margin: 10px 0;
}
.page{
  width: 100%;
  display: flex;
  justify-content: right;
  margin-top: 10px;
}
::v-deep(.el-pagination.is-background .el-pager li:not(.disabled).active ){
  background: #333 !important;
  color: #fff;
}
</style>
